<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>商品分类管理 - 物流管理系统</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<style media="all" type="text/css">
		@import "../style/all.css";
		@import "../style/jquery/ui.all.css";
	</style>
	<style type="text/css">
		#goods-type-list{

		}
		#goods-type-list th{
			text-align:center;
			width:33%;
		}
		#goods-type-list .list td{
			background: #ECECEC;
			height:200px;
			padding:0px;
			text-align:left;
			vertical-align:top;
		}
		#goods-type-list .operate td{
			text-align:right;
			padding-top:0px !important;
			padding-bottom:0px !important;
			padding-left:0px !important;
			padding-right:0px !important;
		}
		#goods-type-list .operate table{
			width:100%;
		}
		#goods-type-list .operate table td{
			border:0px;
		}
		#goods-type-list .operate table .text{
			width:185px;
		}
		#goods-type-list td ul{
			height:100%;
			width:227px;
			list-style-type: none;
			padding:0px;
			margin:0px;
		}
		#goods-type-list td div{
			height:100%;
			overflow: hidden;
			overflow-y: scroll;
		}
		#goods-type-list td ul li span{
			color: #333;
			display:block;
			width: 100%;
			background:#ddd;
			height:18px;
			border:1px solid #ECECEC;
			line-height: 20px;
			padding: 0 0 0 2px;
			cursor: default;
			overflow:hidden;
		}
		#goods-type-list td ul li span img{
			display: none;
			float: right;
		}
		#goods-type-list td ul li span b{
			font-weight : lighter;
		}
		#goods-type-list td ul li span i{
			font-style: normal;
			color:#888;
			display: none;
		}
		#goods-type-list td ul li span input{
			height:14px;
			line-height: 15px;
			width:190px;
			border:1px solid #999;
			margin:1px 0;
		}
		#goods-type-list td ul li span:hover i{
			display:block;
		}
		#goods-type-list td ul li span:hover{
			text-decoration: none;
			min-height:40px;
			background:#f5f5f5;
			cursor: default;
		}
		#goods-type-list td ul li span:hover img{
			display:block;
			cursor: pointer;
		}
		#goods-type-list .list .nonce{
			min-height:40px;
			background:#fff;
		}
		#goods-type-list .list .nonce i{
			display:block;
		}
		#goods-type-list .list .nonce img{
			display:block;
		}
	</style>
	<script type="text/javascript" src="../script/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../script/jquery-ui-personalized-1.6rc6.min.js"></script>
	<script type="text/javascript" src="../script/date.js"></script>
	<script type="text/javascript" src='../script/common.js'></script>
	<script type="text/javascript">
   $(function(){   
	   $("#btn1").click(function(){
		   window.location.href="../proapi/addfirst?tex1="+$("#tex1").attr("value")+"&tex2="+$("#tex2").attr("value");
	   });	
	   
	   $("#btn2").click(function(){
		   window.location.href="../proapi/addsecond?tex3="+$("#tex3").attr("value")+"&tex4="+$("#tex4").attr("value");
	   });	
   })
    </script>
	<script type="text/javascript">

		$(function(){
			$("#dialog").dialog({
				autoOpen: false,
				bgiframe: true,
				resizable: false,
				height: 100,
				modal: true,
				overlay: {
					backgroundColor: '#000',
					opacity: 0.5
				},
				buttons: {
					'取消': function() {
						$(this).dialog('close');
					},
					'确定': function() {
						 window.location.href = '../../proapi/delfirst?tex5='+$("#tex5").attr("value");
					}
				}
			});
			
			//用户选择项目时的处理方法
			$('#merchandise_subdivision_one span').bind("click",function(){
				var t = $(this);
				$('#merchandise_subdivision_one span').removeClass('nonce');
				t.addClass('nonce');
			});
			//删除按钮的处理方法
			$('#merchandise_subdivision_one .delete').bind("click",function(){
				var t = $(this);
				if(confirm('您确定要删除"'+t.siblings('b').text()+'"类么?')){
					//t.parent().remove();
				}
				//$('#dialog').dialog('open');
			});
		});

	</script>
</head>
<body style="background: none">
	<div class="top-bar">
		<!--a href="#" class="button">取 消</a><a href="#" class="button">保 存</a-->
		<h1>商品分类管理</h1>
		<div class="breadcrumbs">
			<a href="../../index.html" target="_top">首页</a> /
			<a href="../index.html" target="_top">配送中心</a> /
            <a href="javascript:{}">商品管理</a>
		</div>
	</div>
	<div class="select-bar"/>
	<div class="table">
		<img src="../../style/img/bg-th-left.gif" width="8" height="7" alt="" class="left" />
		<img src="../../style/img/bg-th-right.gif" width="7" height="7" alt="" class="right" />
		<table id="goods-type-list" class="listing form" cellpadding="0" cellspacing="0">
			<tr>
				<th class="first">一级分类</th>
				<th>二级分类</th>
				<th class="last">商品列表</th>
			</tr>
			<tr class="list">
				<td>
					<div>
					<ul id="merchandise_subdivision_one">
					<c:forEach items="${listfirst }" var="listfirst">
			        <li><span><a href="../proapi/delfirst?firstid=${listfirst.id }"><img class="delete" alt="删除" title="删除" src="../style/img/hr.gif"/></a><b>${listfirst.firstClass }</b><i>${listfirst.firstRemark }</i></span></li>
					</c:forEach>
					</ul>
					</div>
				</td>
				<td>
					<div>
					<ul id="merchandise_subdivision_two">
					<c:forEach items="${listsecond }" var="listsecond">
			        <li><span><img class="delete" alt="删除" title="删除" src="../style/img/hr.gif"/>${listsecond.secondClass }<i>${listsecond.secondRemark }</i></span></li>
					</c:forEach>
					</ul>
					</div>
				</td>
				<td>
					<div>
					<ul id="merchandise">
					<c:forEach items="${listpro }" var="listpro">
			        <li><span><a href="../proapi/getprobyid3?id=${listpro.productid }">${listpro.productname }</a></span></li>
					</c:forEach>
					</ul>
					</div>
				</td>
			</tr>
			<tr class="operate">
				<td>
					<table>
						<tr>
							<td>类别名称</td>
							<td><input type="text" id="tex1" class="text" value=""/></td>
						</tr>
						<tr>
							<td>类别描述</td>
							<td><input type="text" id="tex2" class="text" value=""/></td>
						</tr>
						<tr>
							<td> </td>
							<td>
								<input type="button"  id="btn1" class="button" value="新建"/>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<table>
						<tr>
							<td>类别名称</td>
							<td><input type="text" id="tex3" class="text" value=""/></td>
						</tr>
						<tr>
							<td>类别描述</td>
							<td><input type="text" id="tex4" class="text" value=""/></td>
						</tr>
						<tr>
							<td> </td>
							<td>
								<input type="button" id="btn2" class="button" value="新建"/>
							</td>
						</tr>
					</table>
				</td>
				<td>&nbsp;<!--input type="button" class="button-two" value="添加商品"/--></td>
			</tr>
		</table>
		<!--div class="work">
			<input type="button" class="button" value="返回"/>
			<input type="button" class="button" value="保存"/>
		</div-->
	</div>
    <div id="dialog" title="警告">
		<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>你确定要删除么？</p>
	</div>
</body>
</html>
